<template>
  <div class="user">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    ></page-search>

    <page-content
      :contentConfig="contentConfig"
      pageName="users"
      ref="pageContentRef"
      @newBtnClick="handleNewBtnClick"
      @editBtnClick="handleEditBtnClick"
    >
      <template #status="scope">
        <el-button
          :type="scope.row.enable ? 'success' : 'danger'"
          size="mini"
          >{{ scope.row.enable ? '启用' : '禁用' }}</el-button
        >
      </template>
    </page-content>

    <page-modal
      :modalConfig="modalConfigRef"
      :defaultInfo="defaultInfo"
      ref="pageModalRef"
      pageName="users"
    ></page-modal>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { searchFormConfig } from './config/search.config'
import { contentConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import usePageSearch from '@/hooks/usePageSearch'
import usePageModal from '@/hooks/usePageModal'
import { useVuexState } from '@/store'

const { pageContentRef, handleQueryClick, handleResetClick } =
  usePageSearch()
// pageModal相关的hook逻辑
// 1.处理密码的逻辑
const newCallBack = () => {
  const passwordItem = modalConfig.formItems.find((item) => {
    return item.field === 'password'
  })
  if (passwordItem) {
    passwordItem.isHidden = false
  }
}
const editCallBack = () => {
  const passwordItem = modalConfig.formItems.find((item) => {
    return item.field === 'password'
  })
  if (passwordItem) {
    passwordItem.isHidden = true
  }
}
// 2.动态添加部门和角色列表
const store = useVuexState()
const modalConfigRef = computed(() => {
  const departmentItem = modalConfig.formItems.find(
    (item) => item.field === 'departmentId'
  )
  if (departmentItem) {
    departmentItem.options = store.state.entireDepartment.map((item) => {
      return { title: item.name, value: item.id }
    })
  }
  const roleItem = modalConfig.formItems.find(
    (item) => item.field === 'roleId'
  )
  if (roleItem) {
    roleItem.options = store.state.entireRole.map((item) => {
      return { title: item.name, value: item.id }
    })
  }
  return modalConfig
})
// 3.调用hook获取公共变量和函数
const { pageModalRef, defaultInfo, handleNewBtnClick, handleEditBtnClick } =
  usePageModal(newCallBack, editCallBack)
</script>

<style scoped lang="less">
.user {
  background-color: #f0f2f6;
}
</style>
